<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <PageTools>
          <template #left>
            <span
              class="top-test"
            >本月：社保在缴 公积金在缴 增员 减员 入职 离职</span>
          </template>
          <template #right>
            <el-button type="text">历史归档</el-button>
            <el-button type="text"> 202001月报表</el-button>
          </template>
        </PageTools>
        <div class="topTitle">
          <div class="secondBox">
            <span>部门：</span>
            <div ref="checkbox" class="checkbox">
              <el-checkbox
                v-for="item in list"
                :key="item.id"
                ref="checkbox"
                @change="Dscreening(item.name, $event)"
              >
                {{ item.name }}
              </el-checkbox>
            </div>
          </div>
          <div class="secondBox">
            <span>社保城市：</span>
            <div class="checkbox">
              <el-checkbox>北京</el-checkbox>
            </div>
          </div>
          <div class="secondBox">
            <span>公积金城市 ：</span>
            <div class="checkbox">
              <el-checkbox>北京</el-checkbox>
            </div>
          </div>
        </div>
      </el-card>
      <!-- 主体表格 -->
      <el-card class="elstable">
        <el-table :data="socialList" style="width: 100%">
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column prop="username" label="姓名" sortable />
          <el-table-column prop="mobile" label="手机号" width="130" sortable />
          <el-table-column
            prop="workNumber"
            label="工号"
            width="460"
            sortable
          />
          <el-table-column
            prop="departmentName"
            label="部门"
            width="120"
            sortable
          />
          <el-table-column
            prop="timeOfEntry"
            label="入职时间"
            width="120"
            sortable
          />
          <el-table-column label="离职时间" width="120" sortable />
          <el-table-column
            prop="providentFundCity"
            label="社保城市"
            width="120"
          />
          <el-table-column
            prop="participatingInTheCity"
            label="公积金城市"
            width="120"
          />
          <el-table-column
            prop="socialSecurityBase"
            label="社保基金"
            width="460"
          />
          <el-table-column
            prop="providentFundBase"
            label="公积金基数"
            width="120"
          />
        </el-table>
        <!-- 分页 -->
        <el-pagination
          class="pagination"
          background
          :current-page="page"
          :page-sizes="[2, 3, 5, 10]"
          :page-size="size"
          layout=" sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
  </div>
</template>
<script>
import { getDepartments } from '@/api/departments.js'
import { getEmployeeList } from '@/api/employees.js'
export default {
  data() {
    return {
      list: [], // 部门信息
      socialList: [], // 用户社保信息
      page: 1,
      size: 10,
      total: 0,
      bumList: [] // 筛选部门列表
    }
  },
  created() {
    this.gietdepartmentList()
    this.gieSclial()
  },
  methods: {
    // 获取部门信息
    async gietdepartmentList() {
      const { data } = await getDepartments()
      data.depts.splice(0, 1)
      this.list = data.depts
    },
    // 获取用户社保信息列表
    async gieSclial() {
      const { data } = await getEmployeeList(this.page, this.size)
      this.socialList = data.rows
      this.total = data.total
    },
    handleSizeChange(val) {
      this.size = val
      // 重新请求数据
      this.gieSclial()
    },
    handleCurrentChange(val) {
      this.page = val
      // 重新请求数据
      this.gieSclial()
    },
    // 部门筛选
    async Dscreening(name, e) {
      if (e) {
        this.bumList.push(name)
      } else {
        const i = this.bumList.findIndex(item => item === name)
        this.bumList.splice(i, 1)
      }
      // 如果没有选择
      if (this.bumList.length === 0) {
        // 重置数据
        this.gieSclial()
      } else {
        const { data } = await getEmployeeList(1, this.total)
        const list = data.rows.reduce((acc, item) => {
          if (this.bumList.includes(item.departmentName)) {
            acc.push(item)
          }
          return acc
        }, [])
        // 将筛选后的数据重新渲染
        this.socialList = list
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  font-size: 14px;
}
.topTitle {
  padding: 40px 20px 20px;
  .secondBox {
    position: relative;
    display: flex;
    width: 100%;
    height: 31px;

    span {
      position: absolute;
      top: 2px;
      left: 0;
      font-weight: 800;
    }
    .checkbox {
      padding-left: 90px;
    }
  }
}
.elstable {
  margin-top: 15px;
}
.pagination {
  margin: 10px 0;
}
</style>
